1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
import _ from 'lodash';
import type { GetStaticPropsContext, NextPage } from 'next';
import ReactMarkdown from 'react-markdown';
import Head from 'next/head';
import Emoji from '../Emoji';
import Image from '../Image';
import deepReadDir from '../deepReadDir';
import emojiPlugin from '../emojiPlugin';
import fs from 'fs';
import remarkGemoji from 'remark-gemoji';
const MARKDOWN_DIR = '../eug-vs-xyz/src';
const EMOJI_DIR = 'public/emoji';
const transformLinkURI = (uri: string): string => {
return uri.match(/(.*)\.md/)?.[1] || uri;
}
export const getStaticProps = async (context: GetStaticPropsContext) => {
const path = _.isArray(context.params?.path) && context.params?.path || [context.params?.path];
const markdownSource = fs.readFileSync(`${MARKDOWN_DIR}/${path?.join('/')}.md`).toString();
const emojiFileNames = fs.readdirSync(EMOJI_DIR);
return {
props: {
markdownSource,
emojiFileNames,
path,
}
}
}
export const getStaticPaths = async () => {
const globalPaths = await deepReadDir(MARKDOWN_DIR);
const paths = globalPaths
.map(globalPath => globalPath.match(`${MARKDOWN_DIR}/(.*)\.md`)?.[1] )
.filter(p => p)
.map(p => p?.split('/'))
.map(path => ({ params: { path } }));
return {
paths,
fallback: 'blocking',
}
}
const Page: NextPage = ({ markdownSource, emojiFileNames }: any) => {
return (
<>
<Head>
<title>{`Eugene's Space`}</title>
<meta name="description" content="TODO" />
<link rel="icon" href="/icon-64.png" />
</Head>
<main>
<ReactMarkdown
transformLinkUri={transformLinkURI}
rehypePlugins={[emojiPlugin(emojiFileNames), remarkGemoji]}
components={{
emoji: Emoji,
img: Image,
h1: 'h2',
h2: 'h3',
h3: 'h4',
h4: 'h5',
h5: 'h6',
} as any}
>
{markdownSource}
</ReactMarkdown>
</main>
</>
);
};
export default Page;
|
